<template>
  <!-- [`vk-button--${type}`]: type 表示当type存在时，这个属性为vk-button--type -->
  <button
    ref="_ref"
    class="vk-button"
    :class="{
      [`vk-button--${type}`]: type,
      [`vk-button--${size}`]: size,
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled,
      'is-loading': loading,
    }"
    :disabled="disabled || loading"
    :autofocus="autofocus"
    :type="NativeType"
  >
    <Icon icon="spinner" spin v-if="loading"></Icon>
    <Icon :icon="icon" v-if="icon"></Icon>
    <span><slot></slot></span>
  </button>
</template>

<script setup lang="ts">
import { defineProps, withDefaults, ref, defineExpose } from "vue";
// 其中 type 表示导入的是类型，而不是实际的代码(可加可不加)
import type { ButtonProps } from "./types";
import Icon from "../Icon/Icon.vue";
defineOptions({
  name: "VkButton",
});

// withDefaults() 用于给 defineProps 设置默认值
withDefaults(defineProps<ButtonProps>(), { NativeType: "button" });
// 把 ButtonProps 当作泛型传入
// defineProps<ButtonProps>();

const _ref = ref<HTMLButtonElement>();

// defineExpose() 指定组件中要暴露出去的属性
defineExpose({
  ref: _ref,
});
</script>

<style>
/* .vk-button {
  --main-bg-color: red;
  background-color: var(--main-bg-color);
} */
</style>
